<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>解构赋值的用途</title>
</head>
<body>
  <script>
    // 变量的解构赋值用途很多。
    // 1. 交换变量的值
    var x = 1
    var y = 2
    [x, y] = [y, x]
    // 以上代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。
  </script>
  <script>
    // 2. 从函数返回多个值
    // 函数只能返回一个值，如果要返回多个值，只能将她们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便
    function example() {
      return [1,2,3]
    }
    var [a,b,c] = example()
    function obj() {
      return {
        foo: 1,
        bar: 2
      }
    }
    var {foo, bar} = obj()
  </script>
  <script>
    // 3.函数参数的定义
    // 解构赋值可以方便地将一组参数与变量名对应起来。
    function f([x,y,z]) {
      console.log(x,y,z)
    }
    f([1,2,3])
    function f({x,y,z}) {
      console.log(x,y,z)
    }
    f({z:3,y:2,x:1})
  </script>
  <script>
    // 4.提取json数据，解构赋值对提取JSON对象中的数据，尤其有用。
    let jsonData = {
      id: 42,
      status: "OK",
      data: [867, 5309]
    };

    let { id, status, data: number } = jsonData;

    console.log(id, status, number);
    // 42, "OK", [867, 5309]
  </script>
  <script>
    // 5.函数参数的默认值
    jQuery.ajax = function (url, {
      async = true,
      beforeSend = function () {},
      cache = true,
      complete = function () {},
      crossDomain = false,
      global = true,
      // ... more config
    } = {}) {
      // ... do stuff
    };
    // 指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句
  </script>
  <script>
    // 6.遍历Map结构
    /*
    任何部署了Iterator接口的对象，都可使用for...of循环遍历，Map结构原生支持Iterator接口。配合变量的解构赋值,获取键名和键值就非常方便
    */
   var map = new Map()
   map.set('first', 'hello')
   map.set('second', 'world')
   for(let [key, value] of map) {
     console.log(key + ' is ' + value)
   }
   //first is hello
   // second is world
   console.log(map)
  </script>
  <script>
    //如果只想获取键名，或者只想获取键值，可以写成下面这样。
    // for(let [key] of map) {

    // }
    // //获取键值
    // for(let [,value] of map) {

    // }
  </script>
  <script>
    // 7. 输入模块的指定方法
    // 加载模块时，往往需要指定输入哪些方法，解构赋值使得输入语句非常清晰
    const { SourceMapConsumer, SourceNode } = require("source-map")
  </script>
</body>
</html>